<template>
  <div class="boxall" :class="{ 'with-bg': withBg }">
    <div class="title" v-if="title">{{ title }}</div>
    <slot></slot>
  </div>
</template>

<script setup>
// eslint-disable-next-line
defineProps({
  title: {
    type: String,
    default: ''
  },
  withBg: {
    type: Boolean,
    default: true
  }
})
</script>

<style lang="less" scoped>
.homeBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(
    100% 100% at 50% 50%,
    rgba(161, 220, 223, 0) 31%,
    rgba(34, 136, 141, 0.2) 39%,
    rgba(17, 68, 71, 0.6) 55%,
    #000000 90%
  );
  border-radius: 0px 0px 0px 0px;
  z-index: 1;
}
.boxall {
  position: relative;
  // border: 1px rgba(1, 116, 245, 0.5) solid;
  transition: all 1s;
  cursor: pointer;
  // margin-bottom: 15px;
  // // backdrop-filter: blur(5px);;
  border-radius: 4px;

  // &.with-bg {
  //   &::before {
  //     content: '';
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     width: 100%;
  //     height: 100%;
  //     background-image: url('@/assets/img/dashboard/bgaa01.png');
  //     background-size: cover;
  //     background-position: center;
  //     opacity: 0.2;
  //     z-index: -1;
  //   }
  // }

  .border {
    border: 1px rgba(1, 116, 245, 0.5) solid;
    border-radius: 4px;
    margin: 2px;
    height: 100%;
  }
}

// .boxall:before {
//   content: '';
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   bottom: -1px;
//   top: -1px;
//   left: 0;
//   border-bottom: 1px solid rgba(8, 42, 156, 0.3);
//   border-top: 1px solid rgba(8, 42, 156, 0.3);
//   transition: all 0.5s;
// }

// .boxall:after {
//   content: '';
//   position: absolute;
//   width: 100%;
//   height: 80%;
//   left: -1px;
//   right: -1px;
//   top: 10%;
//   border-left: 1px solid #082a9c;
//   border-right: 1px solid #082a9c;
//   transition: all 0.5s;
// }

// .boxall:hover::before {
  /* width: 0%; */
  // opacity: 0.7;
// }

// .boxall:hover::after {
//   height: 0%;
// }

// .boxall:hover {
  // box-shadow: -5px 0 2px rgba(255, 255, 255, 0.05), 0 -5px 2px rgba(255, 255, 255, 0.05), 5px 0 2px rgba(255, 255, 255, 0.05),
  //   0 5px 2px rgba(255, 255, 255, 0.05);
  // background: rgba(255, 255, 255, 0.05);
// }

.title {
  width: 90%;
  font-size: 17px;
  position: relative;
  // top: 8px;
  // left: 25px;
  padding: 8px 0 0 25px;
  // padding-left: 12px;
  color: #edf3ff;
  height: 34px;
  line-height: 34px;
  font-weight: 700;
}

.title:before {
  width: 5px;
  height: 20px;
  top: 15px;
  position: absolute;
  content: '';
  background: #fff;
  border-radius: 2px;
  left: 15px;
}
</style>
